<template>
  <el-form label-width="6vw">
    <el-form-item :label="'卷盘' + $t('editFormula.partNo')">
      <el-select
        v-model="reelConfig.reelCode"
        :placeholder="$t('editFormula.partNo')"
        filterable
        @change="partNoChange"
      >
        <el-option
          v-for="item of material.reel"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('editFormula.reelDescribe')">
      <el-input
        v-model="reelConfig.reelDesc"
        :placeholder="$t('editFormula.reelDescribe')"
      ></el-input>
    </el-form-item>
    <el-form-item :label="$t('editFormula.reelSize')">
      <el-input
        v-model="reelConfig.sizeType"
        :placeholder="$t('editFormula.reelSize')"
        readonly
      ></el-input>
    </el-form-item>
    <el-form-item label="卷盘直径">
      <el-input-number
        :min="0"
        v-model="reelConfig.reelDiameter"
        placeholder="卷盘直径"
        readonly
      ></el-input-number>
    </el-form-item>
    <el-form-item :label="$t('editFormula.reelThickness')">
      <el-input-number
        :min="0"
        v-model="reelConfig.reelThickness"
        :placeholder="$t('editFormula.reelThickness')"
        readonly
      ></el-input-number>
    </el-form-item>
    <el-form-item label="整盘芯片数量">
      <el-input-number
        v-model="reelConfig.baseQuantity"
        placeholder="整盘芯片数量"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="保护带料号">
      <el-select
        v-model="reelConfig.beltCode"
        placeholder="保护带料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.protectiveBelts"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="泡棉料号">
      <el-select
        v-model="reelConfig.protectiveTapeCode"
        placeholder="泡棉料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.foam"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="美纹胶料号">
      <el-select
        v-model="reelConfig.maskingTapeCode"
        placeholder="美纹胶料号"
        clearable
        filterable
      >
        <el-option
          v-for="item of material.maskingTape"
          :label="item.materialCode"
          :value="item.materialCode"
          :key="item.materialCode"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="有无追溯标签">
      <el-switch
        v-model="reelConfig.traceLabel"
        active-text="有"
        inactive-text="无"
      ></el-switch>
    </el-form-item>
    <template v-if="reelConfig.traceLabel">
      <el-form-item label="追溯标签位置">
        <el-select
          v-model="reelConfig.traceLabelSide"
          placeholder="追溯标签位置"
        >
          <el-option label="正面" :value="0"></el-option>
          <el-option label="反面" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <el-form-item label="不满盘缠绕">
      <el-checkbox-group v-model="reelConfig.scattered">
        <el-checkbox label="保护带" value="protectiveTape" />
        <el-checkbox label="泡棉" value="foam" />
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { computed } from "vue";
import editStore from "@/store/editStore.js";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();
const store = editStore();

let reelConfig = computed(() => store.reelConfig);
let material = computed(() => {
  let list = store.materialList;
  return {
    reel: list.reel,
    protectiveBelts: list.protectiveBelts,
    foam: list.foam,
    carrierTape: list.carrierTape,
    maskingTape: list.maskingTape,
  };
});

function partNoChange(e) {
  let reels = material.value.reel;
  let reel = reels.find((item) => item.materialCode == e);
  if (reel) {
    reelConfig.value.reelDesc = reel.description;
    reelConfig.value.reelThickness = reel.thickness;
    reelConfig.value.sizeType = reel.size;
    reelConfig.value.reelDiameter = reel.diameter;
    reelConfig.value.frontImg = reel?.imgPath?.[0] ?? "";
    reelConfig.value.oppositeImg = reel?.imgPath?.[1] ?? "";
  }
}
</script>
<style scoped lang="scss">
.globalSetting {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
